<script>
    // With the Tauri API npm package:
    import { listen, emit } from "@tauri-apps/api/event";
    import { invoke } from "@tauri-apps/api/tauri";
    import { onMount, onDestroy } from "svelte";
    import { heroStore, getTotalHeroes } from "$lib/js/hero.store";

    let message = "";
    let other_val;
    let payload;
    let page = 0;
    function call_cmd() {
        invoke("my_custom_command", {
            number: 42,
        })
            .then((res) => {
                console.log(
                    `Message: ${res.message}, Other Val: ${res.other_val}`
                );
                message = res.message;
                other_val = res.other_val;
            })
            .catch((e) => console.error(e));
    }

    async function onMessage(value) {
        await heroStore.loadHeroes(page);
        page = page + 1;

        console.log(
            "onMesasge: " +
                JSON.stringify(value) +
                " heroStore=" +
                JSON.stringify($heroStore)
        );
        payload =
            "After Rust Event page=" +
            page +
            " heroStore=" +
            JSON.stringify($heroStore);
    }

    // export let onMessage;
    let unlisten;

    onMount(async () => {
        console.log("onMount called");
        unlisten = await listen("rust-event", onMessage);
    });

    onDestroy(() => {
        console.log("onDestroy called");
        if (unlisten) {
            unlisten();
        }
    });
</script>

<div class="break-after-page bg-gray-400" />
<div class="grid grid-cols-2 gap-4 divide-x-2">
    {#each Array(2) as _, i}
        <div class="pl-16 pr-8 relative flex flex-col">
            <div class="text-4xl">Help:</div>
            <div class="text-xl">1. 阅读flashcard正面，回想词的意义，</div>
            <div class="pl-4">
                &dash; 如果能够立即正确回忆起Flashcard背面的内容，则在背面结果里标记Date及Pass结果为&check;；
            </div>
            <div class="pl-4">
                &dash; 如果不能正确回忆或者即使正确回忆但是要努力回忆才能正确，都在背面结果里标记Date及Pass结果为&cross;；
            </div>
            <div class="text-xl py-2">
                2. 如果连续获得3次结果为&check;，根据记忆心理科学研究结果，大概率该词已存在你的长久记忆里了，可以放心把该词页面做草稿啦
            </div>
            <div class="text-xl">
                3. 根据下次复习间隔建议时间，填写下次复习的日期，根据复习日期排序活页以便下次按期复习
            </div>
            <div class="text-xl pt-2">
                4. 复习时间周期可以参照艾宾浩斯记忆曲线指定
            </div>
            <div class="pl-4">
                &dash; 第一个记忆周期：5分钟 第二个记忆周期：30分钟
                第三个记忆周期：12小时 第四个记忆周期：1天 第五个记忆周期：2天
                第六个记忆周期：4天 第七个记忆周期：7天 第八个记忆周期：15天
            </div>
            <div class="pl-4">
                &dash; “351-351”记忆法
                具体做法是，当你把需要学习的内容全部记住后，要尽量在3个小时之内回忆一遍，
                接下来，分别在5小时内、10小时内、3天内、5天内、10天内复习一遍，经过这6次的学习，
                长期记忆就会形成，你对这部分内容的记忆会相当深刻。
            </div>
            <div class="text-xl pt-2">
                5. 学习建议采用番茄钟方法，每次专注25分钟（如果学习新的内容，建议学习20分钟，回顾5分钟），休息5分钟，不断循环
            </div>
            <div class="h-32">&nbsp;</div>
        </div>
    {/each}
</div>
{#each Array(10) as _, i}
    <div class="break-after-page bg-gray-400 border-b border-solid border-gray-400" />
    <div class="grid grid-cols-2 gap-4 divide-x-2">
        <div class="pl-16 pr-8 relative">
            <h1 class="font-bold text-4xl mt-8 capitalize">
                reconstruction{i}
            </h1>
            <p class="pb-4">UK /ˌriː.kənˈstrʌk.ʃən/ US /ˌriː.kənˈstrʌk.ʃən/</p>

            <div
                class="relative pb-2 grid grid-cols-20 divide-x divide-y divide-gray-200 divide-opacity-80 "
            >
                <div class="text-2xl capitalize">R</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">E</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">C</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">O</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">N</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">S</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">T</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">R</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">U</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">C</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">T</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">i</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">O</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}
                <div class="text-2xl capitalize">N</div>
                {#each Array(19) as _, j}
                    <div />
                {/each}


                {#each Array(20 * 6) as _, j}
                    <div >&nbsp;</div>
                {/each}

            </div>
        </div>

        <div class="pl-16 pr-8 relative">
            <img
                class="absolute top-0 right-0 w-24 h-24"
                alt=""
                src="https://dictionary.cambridge.org/zhs/images/thumb/cricke_noun_002_09178.jpg?version=5.0.244"
            />
            <h1 class="font-bold text-4xl mt-8 capitalize">
                reconstruction{i}
            </h1>
            <p class="pb-4">UK /ˌriː.kənˈstrʌk.ʃən/ US /ˌriː.kənˈstrʌk.ʃən/</p>
            <div class="flex flex-col text-sm">
                <div class="w-full break-after-column font-bold">C1 [U]</div>

                <div class="w-full break-after-column pt-1">
                    <b class="capitalize">the</b> process of building or creating
                    something again that has been damaged or destroyed. （对被毁的事物进行的）重建，改造，复原
                </div>
                <div class="w-full break-after-column pt-1">
                    <b class="capitalize">Post-war</b> economic reconstruction in
                    the country must begin with the resumption of agricultural production.
                    这个国家战后经济的重建必须从恢复农业生产开始。
                </div>
                {#each Array(2) as _, j}
                    <div class="w-full break-after-column font-bold pt-1">
                        C2 [C]
                    </div>
                    <div class="w-full break-after-column pt-1 ">
                        <b class="capitalize">an</b> attempt to get a complete description
                        of an event using the information available, or an attempt
                        to repeat what happened during the event. （根据掌握的信息对发生的事情进行的）重现描述，重现，再现
                    </div>
                    <div class="w-full break-after-column pt-1">
                        <b class="capitalize">A</b> dramatized reconstruction of
                        the robbery was shown on television to try to make people
                        remember information that would help the police. 这起抢劫案以电视剧的形式再现并在电视上播出，是为了使人们能够记起任何有关案件的重要信息，来帮助警察破案。
                    </div>
                {/each}
            </div>

            <div class="absolute left-16 right-8 bottom-2 text-sm bg-gray-50 pt-1">
                <div class="flex flex-row">
                    <div
                        class="h-8 bg-green-400 uppercase px-2 overflow-hidden border border-solid border-gray-400"
                    >
                        &check;: Right Immediately
                    </div>
                    <div
                        class="grow w-1/2 h-8 bg-gray-400 uppercase px-2 overflow-hidden border border-solid border-gray-400"
                    >
                        &cross;: Wrong Or Right but hesitated
                    </div>
                </div>
                <div
                    class="grid grid-cols-13 divide-x divide-y border border-gray-400"
                >
                    <div class="text-sm capitalize">date:</div>
                    {#each Array(12) as _, j}
                        <div />
                    {/each}

                    <div class="text-sm capitalize">pass:</div>
                    {#each Array(12) as _, j}
                        <div />
                    {/each}
                </div>
            </div>
        </div>
    </div>
{/each}

<div class="break-after-page" />
